<template>
  <div class="detail">
    <div class="header">
      <router-link to="/home" v-show="!showAbs" tag="div" class="header-abs iconfont icon-zuola">
      </router-link>
      <div class="header-fixed" v-show="showAbs" :style="opcityStyle">
        <i class="iconfont icon-zuola"></i>景点详情
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detailHeader',
  data () {
    return {
      showAbs: false,
      opcityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handlerScroll () {
      const top = document.body.scrollTop
      if (top > 86
      ) {
        let opacity = top / 300
        opacity = opacity > 1 ? 1 : opacity
        this.opcityStyle = {
          opacity
        }
        this.showAbs = true
      } else {
        this.showAbs = false
      }
    }
  },
  activated () {
    document.body.addEventListener('scroll', this.handlerScroll)
  },
  deactivated () {
    document.body.removeEventListener('scroll', this.handlerScroll)
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/css/vertauls.scss";
.detail{
.header {
.header-abs {

  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 7px 20px;
  border-radius: 20px;
  &::before {
    font-size: 20px;
    color: #fff;
  }
}
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  height: $headerHeight;
  line-height: $headerHeight;
  background-color: $bgColor;
  text-align: center;
  font-size: 26px;
  color: #fff;
  i {
    position: absolute;
    left: 10px;
    font-size: 26px;
  }
}
}
}
.container {
    height: 3000px;
}
</style>
